<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<script src="plugin/jq1.10.2.js"></script>
	<script src="plugin/column.js"></script>
	<link rel="stylesheet" href="css/demo.css" />
	<title>列布局插件</title>
</head>

<body>
<h2>第一行，4等分，每列占1单位宽度，无间距</h2>
<div id="row1">
	<div class="rbWrap">
		<div class="rbItem">1</div>
		<div class="rbItem alt">2</div>
		<div class="rbItem">3</div>
		<div class="rbItem alt">4</div>
	</div>
</div>
<h2>第二行，10等分，共3列，分别占3,3,4单位宽度，间距10px</h2>
<div id="row2">
	<div class="rbWrap">
		<div class="rbItem">1</div>
		<div class="rbItem alt">2</div>
		<div class="rbItem">3</div>
	</div>
</div>
<h2>第三行，5等分，共2列，分别占2,3单位宽度，间距5px</h2>
<div id="row3">
	<div class="rbWrap">
		<div class="rbItem">1</div>
		<div class="rbItem alt">2</div>
	</div>
</div>
<script>
	function initCol(){
		$('#row1').column({
			equally: 4,
			margin: 5
		});
		$('#row2').column({
			equally: 10,
			margin: 10,
			unit_w: [3,3,4]
		});
		$('#row3').column({
			equally: 5,
			margin: 5,
			unit_w: [2,3]
		});
		
	}
	$(function(){
		initCol()
	})
	$(window).resize(function(){
		initCol()
	
	})
	
	</script>
</body>

</html>
